import Vue from "vue";
import VueRouter from "vue-router";

import Home from "../views/Home";
import News from "../views/Home/News";
import Message from "../views/Home/Message";
import Detail from "../views/Home/Message/Detail";
import About from "../views/About";

// 安装插件，全局注册两个组件 router-link / router-view
Vue.use(VueRouter);

// 进行路由配置
const router = new VueRouter({
  /*
    前端路由的两种模式：
      hash
        地址带 #
        兼容性更好 ie 8
        实现原理
          地址切换 location.hash
          事件 hashChange

      history
        地址不带 #，更好看
        兼容性更差 ie 10
        实现原理
          地址切换 history.pushState
          事件 history.change

  */
  mode: "history",
  // 配置对象
  routes: [
    // 路由配置对象
    {
      path: "/home",
      component: Home,
      children: [
        // 子路由
        {
          path: "/home/news",
          component: News,
        },
        {
          // 路由不以 / 开头，会自动补全父路由地址
          path: "message", // 匹配一个路径
          component: Message,
          children: [
            {
              name: "Detail", // 命名路由
              // params参数
              path: "detail/:id", // 匹配多个路径
              component: Detail,
              // 将params参数和query参数以props方法传递给Detail组件
              props($route) {
                // 包含params参数和query参数
                return {
                  ...$route.params,
                  ...$route.query,
                };
              },
            },
          ],
        },
        {
          path: "",
          redirect: "news",
        },
      ],
    },
    {
      path: "/about",
      component: About,
    },
    {
      path: "*", // 除了写过的地址以外的任意地址
      redirect: "/home", // 重定向
    },
  ],
});

// 暴露出去
export default router;
